<template>
  <div class="search-view">
    <div class="search-btn">
      <el-button type="primary" @click="search">拉框查询</el-button>
    </div>
    <div class="search-table" v-show="tableData.length > 0">
      <el-table :data="tableData" style="width: 100%" stripe border @row-dblclick="handleDbclick">
        <el-table-column prop="event_num" label="事件编号" align="center" />
        <el-table-column prop="level" label="事故级别" align="center" />
        <el-table-column prop="area" label="事故区域" align="center" />
        <el-table-column prop="name" label="事故类型" align="center" />
        <el-table-column prop="car_num" label="车牌号" align="center" />
        <el-table-column prop="phone" label="手机号" width="150" align="center" />
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, inject, onBeforeUnmount } from 'vue';
import { DrawEvent, DrawRect } from '@antv/l7-draw';
import { getWuhanEvents } from '../api';
import { pointsWithinPolygon } from '@turf/points-within-polygon';
import { PointLayer } from '@antv/l7';

/*
实现功能：
    点击拉框按钮 可以绘图(矩形) 在矩形中找一下有多少个数据在这个矩形里面
    找到后将这些数据绘制一个点图层 找到这些数据还要放到一个图表中展示,
    在图表中点击对应的数据可以跳转到对应数据的位置
*/

const { map, scene } = inject('map');

const tableData = ref([]);
let draw, eventData, pointLayer;

function search() {
  if (tableData.value.length) {
    tableData.value = [];
  }
  if (draw) {
    draw.destroy();
    // draw = null;
  }
  if (pointLayer) {
    scene.removeLayer(pointLayer);
    pointLayer = null;
  }
  draw = new DrawRect(scene, {});
  draw.on(DrawEvent.Add, e => {
    // console.log('eventData', eventData);
    //e记录就是当前绘制的矩形的要素信息 geojson格式
    // console.log(e);
    //turf是用来进行gis分析的库 它可以计算出当前多边形中包含多少个点
    const points = pointsWithinPolygon(eventData, e);
    // console.log(points);
    //事故点图层
    pointLayer = new PointLayer({ name: 'eventsLayer' });
    pointLayer.source(points).color('pink').shape('circle').size(30).active(true).animate(true);
    scene.addLayer(pointLayer);
    //将这些点的数据放到tableData中
    tableData.value = points.features.map(item => {
      return {
        ...item.properties,
        center: item.geometry.coordinates,
      };
    });
    // console.log(tableData.value);
  });
  // 开启绘制
  draw.enable();
}

function handleDbclick(row, column) {
  if (draw) {
    // console.log('draw', draw);
    //清空绘制数据
    draw.clear();
    draw = null;
    // console.log('draw', draw);
  }
  // console.log('row', row);
  const center = row.center;
  map.flyTo({
    center: center,
    zoom: 15,
    pitch: 0,
  });
}

onMounted(async () => {
  // 调整地图视图
  map.flyTo({
    center: [114.4063, 30.465113],
    zoom: 15,
    pitch: 45,
  });

  const { data } = await getWuhanEvents();
  //   console.log(data);
  eventData = data;
});

onBeforeUnmount(() => {
  if (pointLayer) {
    scene.removeLayer(pointLayer);
  }
  // 销毁当前 Draw 实例
  if (draw) {
    draw.destroy();
    // draw = null;
  }
});
</script>

<style lang="scss" scoped>
.search-view {
  .search-btn {
    position: absolute;
    top: 200px;
    right: 60px;
  }
  .search-table {
    position: absolute;
    width: 60%;
    bottom: 100px;
    left: 20%;
    z-index: 1000;
  }
  :deep(.el-table__cell) {
    background-color: #ccc;
  }
  :deep(.el-table tr):hover {
    background-color: #b6b3b3;
  }
  .el-table {
    max-height: 300px;
    overflow-y: scroll;
    background-color: #ccc;
  }
}
</style>
